<template>
	<view>
		<view class="image-list" v-if="imgList.length > 0">
			<template v-for="(item,index) in imgList">
				<view class="image-box">
					<image @click="previewImage" class="img-sy" :src="item" :key="index"></image>
					<view class="maskBox flex-column jc-center text-white fs21">
						<view class="plr-12 ta-center flex-column mt-12">
							<progress :percent="10" show-info stroke-width="4" backgroundColor="#EBEBEB" activeColor="" :show-info="false" />
							<text class="mt-20">上传进度：5%</text>
						</view>
					</view>
					<view class="closeBtn flex jc-center" @click="itemClick(index)">
						<m-icon  size="24" color="#FFF" type="icon-guanbi1" />
					</view>
				</view>
			</template>
			<view v-if="imgList.length<length" @click="addPhoto" class="feedback_img flex-column ai-center jc-center">
				<m-icon size="48" color="#999999" type="icon-xiangji"></m-icon>
				<view class="add-btn">添加照片</view>
			</view>
		</view>
		<view v-else @click="addPhoto" class="feedback_img flex-column jc-center ai-center">
			<m-icon size="48" spa="0 0 20 0" color="#999999" type="icon-xiangji"></m-icon>
			<view class="ta-center">{{placeholder}}</view>
		</view>
		<image :src="abc" class="ssss" mode=""></image>
	</view>
</template>

<script>
	import { Upload } from '@/api/Ctrls.js'
	import { Toast } from '@/utils/tools.js'
	export default {
		name: "uploadPhoto",
		data() {
			return {
				imgList: [],
				abc:''
			};
		},

		props: {
			value: {
				type: [Array, Object],
				default: () => [],
			},
			// 可上传图片张数 默认4张
			length: {
				type: [String, Number],
				default: () => {
					return 4
				}
			},
			// 说明提示
			placeholder: {
				type: String,
				default: () => {
					return '添加照片(选填)'
				}
			}
		},
		methods: {
			initData() {
				this.imgList = []
			},
			async addPhoto(type = 1) {
				// if (this.imgList.length == this.length) return Toast(`最多允许添加${this.length}张图片`);
				// const { tempFilePaths } = await this.chooseImage();
				// this.$emit("setImg", '111')
				// console.log('tempFilePaths', tempFilePaths)
				// uni.showLoading();
				// const { success, data, msg } = await Upload(tempFilePaths[0]);
				// console.log('success, data,msg===', success, data, msg)
				// if (success) {
				// 	this.imgList.push(data);
				// 	console.log('this.imgList', this.imgList)
				// 	this.$emit("input", this.imgList)
				// }
				// uni.hideLoading()

				let that = this;
				if (this.imgList.length == this.length) return Toast(`最多允许添加${this.length}张图片`);
				uni.chooseImage({
					count: Number(this.length), //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: type == 1 ? ['camera'] : ['album'], //从相册选择
					success: async function({ tempFilePaths, tempFiles }) {
						console.log('tempFilePaths===>', tempFilePaths)
						console.log('tempFiles===>', tempFiles)
						that.abc=tempFilePaths[0];
						uni.showLoading();
						tempFiles[0].FileName = tempFiles[0]['name'];
						console.log('tempFilePaths[0]', tempFilePaths[0])
						const { success, data } = await Upload(tempFilePaths[0]);
						console.log('success, data===', success, data)
						if (success) {
							that.imgList.push(data);
							console.log('that.imgList===>', that.imgList)
							console.log('111')
							that.$emit("input", that.imgList)
						}
						uni.hideLoading()
					}
				});

			},
			// 删除选中
			itemClick(index) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除这张图片？',
					success: (res) => {
						if (res.confirm) {
							that.imgList.splice(index, 1);
						} else if (res.cancel) {
							console.log('点击了取消')
						}
					}
				});
			},
			// 预览大图
			previewImage() {
				uni.previewImage({
					urls: this.imgList,
				});
			},
		}
	}
</script>

<style lang="scss">
	.image-list {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 30rpx;

		.image-box {
			position: relative;
			height: 194rpx;
			border-radius: 16rpx;
			overflow: hidden;

			.img-sy {
				display: block;
				position: relative;
				float: left;
				width: 100%;
				height: 100%;
			}
			
		}
	}

	.feedback_img {
		background: #F6F6F6;
		border-radius: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		width: 100%;
		height: 194rpx;
	}
	.maskBox{
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: rgba(0, 0, 0, 0.6);
	}
	.closeBtn{
		background-color: #000;
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		height: 46rpx;
		width: 46rpx;
		border-radius: 0rpx 0rpx 0 36rpx;
	}
</style>